<template>
  <div class="box">
    <div>
      <el-form
        ref="registForm"
        :model="form"
        :rules="rules"
        label-width="80px"
        class="login-box"
      >
        <h3 class="login-title">学生注册</h3>
        <i class="el-icon-close" @click="$router.go(-1)"></i>

        <el-form-item label="账号" prop="userId">
          <el-input
            type="text"
            placeholder="请输入账号"
            v-model="form.userId"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input
            type="text"
            placeholder="请输入姓名"
            v-model="form.username"
          />
        </el-form-item>
        <el-form-item label="性别" prop="Gender">
          <el-radio-group v-model="form.Gender">
            <el-radio label="male" value="male">男</el-radio>
            <el-radio label="female" value="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="form.password"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="regist('registForm')"
            >注 册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- <router-link tag="a" to="/student">登录</router-link>
    <router-link tag="a" to="/studentRegister">注册</router-link> -->
  </div>
</template>

<script>
import { schools, studentLogin } from "../../public/schoolData.js";
export default {
  name: "studentRegister",
  data() {
    return {
      form: {
        username: "",
        Gender: "",
        userId: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "姓名不可为空", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        userId: [
          { required: true, message: "账号不可为空", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 13 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 15 个字符",
            trigger: "blur",
          },
        ],
        Gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    };
  },
  methods: {
    regist(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let username = this.form.username;
          let Gender = this.form.Gender;
          let userId = this.form.userId;
          let password = this.form.password;
          let studentId = Math.floor(schools[schools.length - 1].id) + 1;
          if (studentLogin[userId]) {
            this.$message.error("该账号已存在");
            return;
          }
          studentLogin[userId] = {
            accountId: userId,
            password: password,
            studentId: studentId,
          };
          schools.push({
            id: studentId,
            name: username,
            Gender: Gender,
            inCourseList: [],
            followTeachers: [],
            password: 0,
          });
          this.$message.success("注册成功");
          this.$router.push("/studentLogin");
        } else {
          return false;
        }
      });
      // this.$router.push("/studentlogin");
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  position: relative;
}
.el-icon-close {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 25px;
  color: #909399;
}
.el-icon-close:hover {
  cursor: pointer;
  color: #000;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
.el-button {
  width: 70%;
}
</style>